<template>
    <view>
        <!-- pages/collectioncode/index.wxml -->
        <view class="code_box">
            <view class="code_show">
                <view class="active_box">
                    <view @tap.stop.prevent="onChange" data-active="0" :class="active == 0 ? 'actives' : ''">意约平台收款码</view>
                    <view>|</view>
                    <view @tap.stop.prevent="onChange" data-active="" :class="active == 1 ? 'actives' : ''">门店系统收款码</view>
                </view>
                <view class="code_title">{{ active == 0 ? '意约平台收款码' : '门店系统收款码' }}</view>
                <view class="code_wx mt-10">
                    支付即送意豆
                    <span class="mr-20"></span>
                    意豆当"钱"花
                </view>
                <view v-if="(imagePathShow && active == 1 && incomingInfo.status == 4 && (incomingInfo.aliVerifyState == 1 || incomingInfo.wechatVerifyState == 1)) || active == 0">
                    <view class="namebox">
                        <view :class="active == 1 ? 'code_img_pt' : 'code_img'">
                            <image :src="active == 1 ? imagePath : codeImg"></image>
                        </view>
                    </view>
                    <view class="name mt-20">{{ name }}</view>
                    <view class="code_wx mt-20">保存意约收款码并打印张贴在店内更方便收款</view>
                    <view :class="'btn_box ' + (active == 1 ? 'btn_box1' : '')">
                        <!-- <view class="btn_bind" catchtap="goBind">绑定公众号</view> -->
                        <view class="btn_save" @tap.stop.prevent="onSave">保存到相册</view>
                        <view
                            v-if="imagePathShow && active == 1 && incomingInfo.status == 4 && (incomingInfo.aliVerifyState == 1 || incomingInfo.wechatVerifyState == 1)"
                            class="btn_save"
                            @tap.stop.prevent="goApply"
                        >
                            查看认证状态
                        </view>
                    </view>
                </view>
                <view v-if="!imagePathShow && active == 1 && (incomingInfo.status != 4 || (incomingInfo.aliVerifyState != 1 && incomingInfo.wechatVerifyState != 1))">
                    <view class="namebox">
                        <view class="'code_img_pt">
                            <image src="/static/images/nosee.png"></image>
                        </view>
                    </view>
                    <view class="msg_no mt-40">您尚未开通门店系统收款码， 申请开通后方可使用门店系统收款码服务</view>
                    <view class="btn_box mt-40">
                        <!-- <view class="btn_save" catchtap="onShowService">联系客服</view> -->
                        <view class="btn_save" @tap.stop.prevent="goApply">申请开通</view>
                    </view>
                </view>
            </view>
            <view class="voice_box" v-if="imagePathShow && active == 1">
                <view v-if="active == 1" class="voice_item" style="color: #666; margin: 30rpx 0" @tap.stop.prevent="goBindBox">
                    <view class="centers">
                        <view>绑定语音播报云音箱</view>
                    </view>
                    <view class="centers">
                        <text class="mr-10">{{ deviceDetail.status ? '已绑定' : '未绑定' }}</text>
                        <image class="icon-32" :src="imgUrl + 'right.png'"></image>
                    </view>
                </view>
                <view class="hrs" v-if="active == 1"></view>
                <view v-if="active == 1" class="voice_item" style="color: #666; margin: 30rpx 0" @tap.stop.prevent="goBindCard">
                    <view class="centers">
                        <view>修改收款结算银行卡</view>
                    </view>
                    <view class="centers">
                        <text class="mr-10 card">{{ cardDetails.openUnionNoName || incomingInfo.zbankNoName }}</text>
                        <image class="icon-32" :src="imgUrl + 'right.png'"></image>
                    </view>
                </view>
            </view>
            <view class="voice_box" v-if="(imagePathShow && active == 1) || active == 0">
                <view class="voice_item">
                    <view class="box_item">
                        <!-- <image src="../../images/icon_voice.png"></image> -->
                        <text style="color: #333">收钱语音播报</text>
                    </view>
                    <switch :checked="sChecked" color="#FCA55C" @change="switchChange" />
                </view>
                <view class="voice_item">打开收钱语音播报后，每次收款成功设备将会为您播报收款详情“意约收款成功”</view>
                <view class="voice_item">
                    <text style="color: #666">点击“试听”按钮，试听播报语音</text>
                    <view class="centers btn_voice">
                        <text @tap="playVoice" class="mr-10">试听</text>
                        <image class="icon-32" src="/static/images/st.png"></image>
                    </view>
                </view>
                <view class="code_money_msg mt-30">
                    注：使用收款码每笔金额平台将抽取0.6%（最低0.01元）的手续费
                    <text v-if="active == 1">,收款金额次日到账收款银行卡；</text>
                </view>
            </view>
        </view>
        <canvas width="750" height="1330" style="width: 750px; height: 1330px" type="2d" class="canvas" canvas-id="shareqr" id="shareqr"></canvas>

        <!-- 客服弹窗 -->
        <view :class="'modal bottom-modal ' + (show1 ? 'show' : '')" @touchmove.stop.prevent="preventTouchMove">
            <view class="dialog dialog-goods" style="border-radius: 40rpx 40rpx 0 0" catchtap>
                <view class="bg-white padding-xl text-center">
                    <view class="padding-top-xs text-xl text-bold">联系客服</view>
                    <view class="padding-tb text-df text-darkGrey" style="border-bottom: 1px solid #cccccc">服务时间：9:00-22:00</view>
                    <view class="padding-tb text-df text-darkGrey" @tap.stop.prevent="callphone">0755-8465-9719</view>
                    <view class="show_box radiues text-white text-df bg-orange text-center" @tap="getshow1">取消</view>
                </view>
            </view>
        </view>

        <!-- 画布，用来画二维码，只用来站位，不用来显示 -->
        <view class="canvas-box">
            <canvas v-if="!canvasHidden" style="width: 360px; height: 360px; background: #f1f1f1" canvas-id="mycanvas" />
        </view>
    </view>
</template>

<script>
// pages/collectioncode/index.js
const app = getApp(); // 引入app

import _request from '../../utils/request.js';

const QR = require('../../utils/qrcode.js');

const moment = require('../../utils/moment.min');

let audioCtx = null;
export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,

            //全局img路径
            shopimgUrl: app.globalData.shopimgUrl,

            codeImg: '',
            name: uni.getStorageSync('nickName').length > 10 ? uni.getStorageSync('nickName').substring(0, 10) + '...' : uni.getStorageSync('nickName'),
            sChecked: true,
            isPlaying: false,
            canvasHidden: false,
            active: 0,
            imagePathShow: true,

            // 门店认证状态
            show1: false,

            incomingInfo: null,

            // 进件对象
            deviceDetail: null,

            // 设备详情
            // 收款卡详情
            cardDetails: null,

            invitecode: '',
            imagePath: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        let isPlay = uni.getStorageSync('isPlay'); // console.log('---', wx.getStorageSync('isPlay').length)

        if (uni.getStorageSync('isPlay').length == 0) {
            isPlay = true;
        }

        this.setData({
            sChecked: isPlay
        }); // 收款码

        _request
            .postObj('/stylistUser/getStoreCollectionCode', {
                storeId: uni.getStorageSync('storeId')
            })
            .then((res) => {
                if (res.data.code == 200) {
                    this.setData({
                        codeImg: res.data.data,
                        name: uni.getStorageSync('nickName').length > 10 ? uni.getStorageSync('nickName').substring(0, 10) + '...' : uni.getStorageSync('nickName')
                    });
                }
            });

        var size = this.setCanvasSize(); //动态设置画布大小

        audioCtx = uni.createInnerAudioContext();
        const that = this;
        const userId = uni.getStorageSync('userId'); // 获取邀请码

        _request
            .get('/recomUser/findReCode', {
                userId: uni.getStorageSync('userid')
            })
            .then((res) => {
                this.setData(
                    {
                        invitecode: res.data.data.invitecode
                    },
                    () => {
                        // 门店系统码是否认证
                        // _request.get('/order/getStoreCertificationBox', {
                        //   storeId: wx.getStorageSync('storeId'),
                        // }, app.globalData.userType).then((res) => {
                        //   if (res.data.code == 200) {
                        //     vm.createQrCode(app.globalData.baseurl + '/box-payment/boxPayment.html' + '?storeId=' + wx.getStorageSync('storeId') + '&userId=' + userId + '&invitecode=' + vm.data.invitecode, "mycanvas", 360, 360);
                        //   } else {
                        //     vm.createQrCode('未开通', "mycanvas", size.w, size.h);
                        //     vm.setData({
                        //       imagePathShow: false
                        //     })
                        //   }
                        // });
                    }
                );
            })
            .catch((error) => {
                console.log(error, 'error');
            });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.getInit();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
        uni.switchTab({
            url: '/firstpages/my/index'
        });
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // tabs切换
        onChange(event) {
            console.log(event);
            this.setData({
                active: event.target.dataset.active
            });
        },

        // 绑定公众号
        goBind() {
            uni.navigateTo({
                url: '/pages/collectioncode/bindofficialaccount/index'
            });
        },

        // 绑定音箱
        goBindBox() {
            if (!this.incomingInfo.shopId || this.incomingInfo.shopId == null) {
                uni.showModal({
                    title: '提示',
                    content: '请先完成商户认证',
                    showCancel: false,
                    confirmText: '知道了'
                });
                return;
            }

            uni.navigateTo({
                url: '/pages/collectioncode/bindbox/index'
            });
        },

        // 修改收款结算银行卡
        goBindCard() {
            const { cardDetails, incomingInfo } = this; // 30天后的时间，小于30不可以修改

            const timeBool = moment(cardDetails?.updateTime).valueOf() + 86400000 * 30;
            const nowtime = Date.parse(new Date());
            console.log(timeBool);

            if (cardDetails?.status == 5 && timeBool > nowtime) {
                uni.showModal({
                    title: '提示',
                    content: '您最近30天内有修改过结算银行卡,无法再次修改;',
                    showCancel: false,
                    confirmText: '知道了'
                });
                return;
            } else {
                _request
                    .get('/box/getCardDetails', {
                        shopId: incomingInfo.shopId,
                        status: 0
                    })
                    .then((res) => {
                        const data = res.data.data;

                        if (res.data.code == 200) {
                            if ([1, 3, 4].includes(data?.status)) {
                                uni.navigateTo({
                                    url: '/pages/collectioncode/bindcard/status/index'
                                });
                            } else {
                                uni.navigateTo({
                                    url: '/pages/collectioncode/bindcard/index'
                                });
                            }
                        }
                    });
            }
        },

        // 申请开通
        goApply() {
            uni.navigateTo({
                url: '/pages/gatheringAuth/index'
            });
        },

        //绘制分享码
        drawShareQR(qrCodeUrl) {
            const posterCanvas = uni.createSelectorQuery().select('#shareqr');
            const vm = this;
            return new Promise((resolve, reject) => {
                posterCanvas
                    .fields({
                        node: true,
                        size: true
                    })
                    .exec((res) => {
                        const canvas = res[0].node;
                        const ctx = canvas.getContext('2d');
                        const dpr = uni.getSystemInfoSync().windowWidth / 375;
                        canvas.width = res[0].width * dpr;
                        canvas.height = res[0].height * dpr; // 绘制海报

                        uni.getImageInfo({
                            src: this.imgUrl + '/static/pages/collectioncode/qr-bg.png',
                            success: (res) => {
                                let imageUrl = res.path; // 图片临时地址

                                let imageW = res.width / dpr;
                                let imageH = res.height / dpr;
                                let ratio = imageW / canvas.width; // 获取比例

                                let imageObj = canvas.createImage();
                                imageObj.src = imageUrl;

                                imageObj.onload = (res) => {
                                    ctx.drawImage(imageObj, 0, 0, imageW / ratio, imageH / ratio); // 绘制二维码

                                    uni.getImageInfo({
                                        src: qrCodeUrl,
                                        success: (res) => {
                                            let qrImageUrl = res.path;
                                            let qrImageW = vm.active == 0 ? 160 : 340 / dpr; // 二维码大小

                                            let qrRatio = ratio;
                                            let qrImageObj = canvas.createImage();
                                            qrImageObj.src = qrImageUrl;

                                            qrImageObj.onload = (res) => {
                                                const info = uni.getSystemInfoSync();

                                                if (vm.active == 0) {
                                                    ctx.drawImage(
                                                        qrImageObj,
                                                        10,
                                                        10,
                                                        260,
                                                        260,
                                                        canvas.width / 2 - (qrImageW + 120) / qrRatio / 2,
                                                        canvas.height / 2 - (qrImageW + 360) / qrRatio / 2,
                                                        (qrImageW + 120) / qrRatio,
                                                        (qrImageW + 120) / qrRatio
                                                    );
                                                } else {
                                                    ctx.drawImage(
                                                        qrImageObj,
                                                        imageW / ratio / 2 - (qrImageW - 50) / qrRatio / 2,
                                                        imageH / ratio / 2 - (qrImageW - 60) / qrRatio / 2,
                                                        340 * dpr,
                                                        340 * dpr
                                                    );
                                                } // 绘制文字

                                                ctx.font = '28px HarmonyOS_Sans_SC_Medium';
                                                ctx.textAlign = 'center';
                                                ctx.fillStyle = '#ED701C';
                                                let qrImageW_Old = 160 / dpr;

                                                if (vm.active == 0) {
                                                    ctx.fillText(this.name, imageW / ratio / 2, canvas.height / 2 - (qrImageW_Old + 370) / qrRatio / 2);
                                                } else {
                                                    ctx.fillText(this.name, imageW / ratio / 2, imageH / ratio / 2 - (qrImageW - 80) / qrRatio / 2);
                                                } // canvas转图片临时路径

                                                uni.canvasToTempFilePath({
                                                    canvas: canvas,
                                                    fileType: 'png',
                                                    height: 1020,
                                                    success: (res) => {
                                                        let data = {
                                                            img: res.tempFilePath
                                                        };
                                                        console.log(data);
                                                        resolve(data);
                                                    },
                                                    fail: (err) => {
                                                        reject(err);
                                                    }
                                                });
                                            };
                                        },
                                        fail: (err) => {
                                            reject(err);
                                        }
                                    });
                                };
                            },
                            fail: (err) => {
                                reject(err);
                            }
                        });
                    });
            });
        },

        // 保存二维码
        onSave() {
            this.getInit();
            uni.showLoading({
                title: '保存中...'
            });
            this.drawShareQR(this.active == 0 ? this.codeImg : this.imagePath).then((res) => {
                console.log(res.img);
                uni.getImageInfo({
                    src: res.img,
                    success: function (res) {
                        console.log(res, 'resres'); //图片保存到本地

                        uni.saveImageToPhotosAlbum({
                            filePath: res.path,
                            success: function (data) {
                                uni.hideLoading();
                                uni.showModal({
                                    title: '提示',
                                    content: '您的收款码已存入手机相册，赶快分享给好友吧',
                                    showCancel: false
                                });
                            },
                            fail: function (err) {
                                if (err.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' || err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
                                    // 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
                                    uni.showModal({
                                        title: '提示',
                                        content: '需要您授权保存相册',
                                        showCancel: false,
                                        success: (modalSuccess) => {
                                            uni.openSetting({
                                                success(settingdata) {
                                                    console.log('settingdata', settingdata);

                                                    if (settingdata.authSetting['scope.writePhotosAlbum']) {
                                                        uni.showModal({
                                                            title: '提示',
                                                            content: '获取权限成功,再次点击图片即可保存',
                                                            showCancel: false
                                                        });
                                                    } else {
                                                        uni.showModal({
                                                            title: '提示',
                                                            content: '获取权限失败，将无法保存到相册哦~',
                                                            showCancel: false
                                                        });
                                                    }
                                                },

                                                fail(failData) {
                                                    console.log('failData', failData);
                                                },

                                                complete(finishData) {
                                                    console.log('finishData', finishData);
                                                }
                                            });
                                        }
                                    });
                                }
                            },

                            complete(res) {
                                uni.hideLoading();
                            }
                        });
                    },
                    fail: function (res) {
                        console.log(res, 'res');
                    }
                });
            });
        },

        // 显示客服弹出
        onShowService() {
            this.setData({
                show1: !this.show1
            });
        },

        getshow1() {
            this.setData({
                show1: !this.show1
            });
        },

        callphone() {
            uni.makePhoneCall({
                phoneNumber: '0755-8465-9719'
            });
        },

        //适配不同屏幕大小的canvas
        setCanvasSize: function () {
            var size = {};

            try {
                var res = uni.getSystemInfoSync();
                var scale = 750 / 340; //不同屏幕下canvas的适配比例；设计稿是750宽  686是因为样式wxss文件中设置的大小

                var width = res.windowWidth / scale;
                var height = width; //canvas画布为正方形

                size.w = width;
                size.h = height;
            } catch (e) {
                // Do something when catch error
                console.log('获取设备信息失败' + e);
            }

            return size;
        },

        /**
         * 绘制二维码图片
         */
        createQrCode: function (url, canvasId, cavW, cavH) {
            //调用插件中的draw方法，绘制二维码图片
            console.log(url);
            QR.api.draw(url, canvasId, cavW, cavH);
            setTimeout(() => {
                this.canvasToTempImage(canvasId);
            }, 1000);
        },

        /**
         * 获取临时缓存照片路径，存入data中
         */
        canvasToTempImage: function () {
            var that = this; //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。

            uni.canvasToTempFilePath({
                canvasId: 'mycanvas',
                success: function (res) {
                    var tempFilePath = res.tempFilePath;
                    console.log(tempFilePath);
                    that.setData({
                        imagePath: tempFilePath // canvasHidden:true
                    });
                },
                fail: function (res) {
                    console.log(res);
                }
            });
        },

        //语音播报开关
        switchChange(e) {
            console.log('----', e.detail.value);
            uni.setStorageSync('isPlay', e.detail.value);

            if (e.detail.value) {
                app.globalData.openTcp();
            } else {
                app.globalData.closeTcp();
            }
        },

        //语音播报试听
        playVoice() {
            if (this.isPlaying) {
                audioCtx.stop();
            } else {
                audioCtx.src = 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/notice/shoukuan.mp3?v=1';
                audioCtx.play();
            }

            this.setData({
                isPlaying: !this.isPlaying
            });
        },

        //初始化
        getInit() {
            const vm = this;
            const userId = uni.getStorageSync('userId');
            var size = this.setCanvasSize(); //动态设置画布大小
            // 获取进件（盒子商户）信息

            _request
                .get('/box/getIncoming', {
                    storeId: uni.getStorageSync('storeId')
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        const data = res.data.data;
                        this.setData(
                            {
                                incomingInfo: data
                            },
                            () => {
                                const vm = this; // 查看设备详情

                                if (data.shopId) {
                                    _request
                                        .get('/box-device/deviceDetail', {
                                            shopId: data.shopId
                                        })
                                        .then((res) => {
                                            if (res.data.code == 200) {
                                                vm.setData({
                                                    deviceDetail: res.data.data
                                                });
                                            }
                                        });
                                } // 查询收款卡

                                if (data.shopId) {
                                    _request
                                        .get('/box/getCardDetails', {
                                            shopId: data.shopId,
                                            status: 5
                                        })
                                        .then((res) => {
                                            if (res.data.code == 200) {
                                                vm.setData({
                                                    cardDetails: res.data.data
                                                });
                                            }
                                        });
                                }
                            }
                        ); // 验证门店是否展示二维码，wx。zfb通过其一即可
                        // if (data.openAccountStatus == 4 && (data.aliVerifyState == 1 || data.wechatVerifyState == 1)) {

                        if (data.status == 4 && (data.aliVerifyState == 1 || data.wechatVerifyState == 1)) {
                            console.log(this);
                            console.log(
                                app.globalData.baseurl +
                                    '/box-payment/boxPayment.html' +
                                    '?storeId=' +
                                    uni.getStorageSync('storeId') +
                                    '&userId=' +
                                    userId +
                                    '&invitecode=' +
                                    vm.invitecode +
                                    '&aliVerifyState=' +
                                    data.aliVerifyState +
                                    '&wechatVerifyState=' +
                                    data.wechatVerifyState +
                                    '&'
                            );
                            vm.createQrCode(
                                app.globalData.baseurl +
                                    '/box-payment/boxPayment.html' +
                                    '?storeId=' +
                                    uni.getStorageSync('storeId') +
                                    '&userId=' +
                                    userId +
                                    '&invitecode=' +
                                    vm.invitecode +
                                    '&aliVerifyState=' +
                                    data.aliVerifyState +
                                    '&wechatVerifyState=' +
                                    data.wechatVerifyState +
                                    '&',
                                'mycanvas',
                                360,
                                360
                            );
                        } else {
                            vm.createQrCode('未开通', 'mycanvas', size.w, size.h);
                            vm.setData({
                                imagePathShow: false
                            });
                        }
                    }
                });
        },

        preventTouchMove() {
            console.log('占位：函数 preventTouchMove 未声明');
        }
    }
};
</script>
<style>
/* pages/collectioncode/index.wxss */
page {
    height: 100%;
}

.code_box {
    width: 750rpx;
    padding-top: 40rpx;
    min-height: 100%;
    box-sizing: border-box;
    /* background: linear-gradient(180deg, #FF8722 0%, #FFBC47 100%); */
    background: #ff8722;
    padding-bottom: 20rpx;
}

.code_show {
    margin: 0 20rpx;
    padding-top: 40rpx;
    text-align: center;
    width: 710rpx;
    height: 980rpx;
    background: #ffffff;
    border-radius: 16rpx;
    /* box-shadow: 2px 2px 8px 2px rgba(241, 241, 241, 0.4); */
}

.code_ybox {
    margin-top: 40rpx;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    width: 710rpx;
    position: relative;
    left: -20rpx;
}

.code_y {
    border-radius: 50%;
    width: 40rpx;
    height: 40rpx;
    background-color: #ff8722;
}

.code_hr {
    width: 628rpx;
    height: 0;
    border: 2rpx dashed #ff8722;
}

.code_title {
    height: 56rpx;
    font-size: 40rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 56rpx;
    margin-top: 80rpx;
}

.code_img {
    width: 360rpx;
    height: 360rpx;
    overflow: hidden;
    margin: 0 auto;
}

.code_img image {
    width: 360rpx;
    height: 420rpx;
}

.code_wx {
    height: 40rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999;
    line-height: 40rpx;
}

.code_msg {
    text-align: center;
    margin-top: 20rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 40rpx;
}

.btn_box {
    display: flex;
    justify-content: space-around;
    margin-top: 52rpx;
}

.btn_box view {
    width: 400rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    border-radius: 44px;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
}

.btn_bind {
    background: #ff8722;
    color: #fff;
    box-shadow: 0px 4px 8px 0px #fca55c;
}

.btn_save {
    background: #ff8722;
    border-radius: 44px;
    color: #fff;
}

.canvas {
    position: fixed;
    left: 9999999rpx;
}

.code_money_msg {
    font-size: 26rpx;
    /* position: absolute; */
    color: #999;
    width: 100%;
    text-align: left;
}

.namebox {
    width: 360rpx;
    height: 360rpx;
    margin: 40rpx auto;
    margin-bottom: 0rpx;
    border-radius: 10px;
    box-sizing: border-box;
}

.name {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 44rpx;
}

.voice_box {
    background: #ffffff;
    border-radius: 16px;
    padding: 10px;
    margin: 20rpx;
    color: #999999;
    font-size: 14px;
}

.box_item {
    display: flex;
}

.box_item image {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.voice_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px 0;
}

.btn_voice {
    border: 2px solid #ff8722;
    padding: 2px 10px;
    margin-right: 10px;
    border-radius: 20px;
    background: #fff2e7;
    color: #333333;
    font-size: 24rpx;
    height: 52rpx;
    box-sizing: border-box;
}

.active_box {
    padding: 0 60rpx;
    width: 710rpx;
    border-radius: 44px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    color: #999;
}

.active_box view {
    height: 66rpx;
    line-height: 66rpx;
    color: #999;
    border-radius: 44px;
    text-align: center;
}

.active_box .actives {
    color: #ff8722;
    height: 66rpx;
    line-height: 66rpx;
    border-radius: 44px;
    text-align: center;
}

.canvas-box {
    position: fixed;
    top: 999999rpx;
    left: 0;
}

.code_img_pt {
    width: 360rpx;
    height: 360rpx;
    overflow: hidden;
    margin: 0 auto;
}

.code_img_pt image {
    width: 360rpx;
    height: 360rpx;
}

.msg_no {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;
    padding: 0 30rpx;
}

.show_box {
    width: 650rpx;
    line-height: 90rpx;
}

.status_btn {
    position: fixed;
    top: 64%;
    right: 0;
    background: #ff8722;
    color: #fff;
    text-align: center;
    line-height: 60rpx;
    height: 60rpx;
    padding: 0 10rpx;
    border-top-left-radius: 44rpx;
    border-bottom-left-radius: 44rpx;
    font-size: 24rpx;
}

.btn_box1 {
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
}

.btn_box1 .btn_save {
    width: 300rpx;
}
.base_btn {
    width: 100%;
    height: 540rpx;
}
.card {
    width: 300rpx;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
